<template>
    <Modal v-model="modal" @on-ok="ok('form')" :loading="loading" title="更新权限">
        <IForm :model="form" ref="form" :label-width="120" :rules="formRule" >
            <FormItem prop="name" label="权限路径">
                <IInput v-model="form.name"  placeholder="路径地址,请去除/#前缀,保留/后面的路径地址" clearable />
            </FormItem>
            <FormItem prop="displayName" label="权限中文名称">
                <IInput v-model="form.displayName"  placeholder="权限中文名称" clearable />
            </FormItem>
        </IForm>
    </Modal>
</template>
<script>
import {Modal,Form,Input,Button} from 'view-design';

export default {
    props:{
        callback:{ type : Function}
    },
    components:{
        Modal,
        'IInput' : Input,
        'IForm' : Form,
        'FormItem' : Form.Item,
        'IButton' : Button,
    },
    data () {
        const validateName=(rule , value ,callback)=>{
            if(value.indexOf('admin')==0 || value.indexOf('#')>=0){
                callback(new Error('请去除/#前缀,保留/后面的路径地址'));
            }
            if (value!='/'){
                var pathArr = value.split('/');
                var reg = /^[A-Za-z_]+$/;
                for(var i in pathArr){
                    if(!reg.test(pathArr[i])){
                        callback(new Error('请填写合法路径名,不带/,A-Z,a-z,_'));
                    }
                }
            }
            this.Axios.Config.Permission.CheckName({name:value,id:this.form.id})
            .then(res =>{
                if(!res){
                    callback(new Error('路径已存在'));
                    return false;
                }
                callback();
            })
        };
        const validateDisplayName=(rule , value ,callback)=>{
            var reg = /^[\u4E00-\u9FA5\a-zA-z-]+$/;
            if(!reg.test(value)){
                callback(new Error('请填写中文英文名,只能填写-特殊符号'));
            }
            callback();
        };
        return {
            modal: false,
            loading : true,
            form :{
                id : 0,
                pid : 0,
                name : '',
                displayName  : '',
            },
            formRule : {
                name: [
                    { required: true, message: '请填写权限路径', trigger: 'blur' },
                    { validator: validateName, trigger: 'blur'}
                ],
                displayName: [
                    { required: true, message: '请填写权限中文名,多个子模块、子操作以-分开', trigger: 'blur' },
                    { validator: validateDisplayName, trigger: 'blur'}
                ]
            },
        }
    },
    methods: {
        changeLoading(){
            this.loading = false;
            this.$nextTick(() => {
              this.loading = true;
            });
        },
        ok(name){
            this.$refs[name].validate(valid => {
                if (!valid) {this.changeLoading();return false;}
                if (this.form.id!=0) {
                    this.Axios.Config.Permission.Update(this.form)
                    .then(res =>{
                        this.changeLoading();
                        if(!res) return false;
                        this.modal = false;
                        this.callback();
                    })
                }else{
                    this.Axios.Config.Permission.Insert(this.form)
                    .then(res =>{
                        this.changeLoading();
                        if(!res) return false;
                        this.modal = false;
                        this.callback();
                    })
                }
                
            })
        },
    },
    watch:{
        modal(newValue,oldValue){
            if(!newValue){
                this.form.id = 0;
                this.form.pid = 0;
                this.$refs.form.resetFields();
            }
        }
    }
}
</script>